<extend name="public@base"/>
<block name="head">
    <title>{$category.name}</title>
<style>
    .captiansMotto {
        font-size: 30px;
        /* font-weight: bold; */
        padding-top: 20%;
    }
    .captiansMotto p {
        color: black;
        line-height: 40px;
    }
    .captianBlogSlider .item-bg-1 {
        background-image: url(__TMPL__/public/assets/img/slider/captianslidershow1.png);
    }
    .captianBlogSlider .item-bg-2 {
        background-image: url(__TMPL__/public/assets/img/slider/captianslidershow1.png);
    }
    .captianBlogSlider .item-bg-3 {
        background-image: url(__TMPL__/public/assets/img/slider/captianslidershow1.png);
    }
    .captianBlogSlider .hero-slider-item::before {
        background-color: transparent;
    }
</style>
</block>
<block name="body">
        <div>
            <div class="container">
                <h3 class="specialTitle">{$category.name}</h3>
                <!-- The Line -->
                <div class="hrLine" style="background: #9e9e9e;"></div>
            </div>
        </div>
        
        <!-- Captians Blog -->
        <section class="contact-us-section ptb-100 white-bg" style="padding-top: 30px;">
            <portal:articles order="post.create_time DESC" page="theme_vars.page_count" relation="categories" categoryIds="$category.id">     
                <div class="container">
                    <div class="row" style="margin-bottom: 40px;">                   
                        <div class="col-md-4 col-lg-4"> 
                            <div>
                                <img src="{$vo.thumbnail|default=$vo.more.thumbnail|cmf_get_image_url}" alt="concact" style="width: 100%;">
                            </div>
                            <h3>{$vo.post_title}</h3>
                        </div>
                        
                        <div class="col-md-8 col-lg-8"> 
                            <div class="captiansMotto">
                                <p>
                                    {$vo.post_excerpt}
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="captianBlogSlider">
                        <empty name="vo.more.photos">
                        <else/>
                            <div class="hero-slider owl-carousel owl-theme owl-theme-1">
                                <foreach name="vo.more.photos" item="st" key="i">
                                    <div class="hero-slider-item item-bg-{$i}" style="background-image:url({$st.url|default='__TMPL__/public/assets/img/indexpackage.png'|cmf_get_image_url})" ></div>
                                </foreach>
                            </div>
                        </empty>
                    </div>
                </div>
            </portal:articles>
        </section>
        <!-- End Captians Blog -->
    <block name="scripts">
        <script>
            (function ($) {
                "use strict";

                $('.specialBtn').click(function () {
                    $('.packagesShow').css({'display': 'none'});
                    $('.packageDetailBlock').css({'display': 'none'});
                    $('.detail').css({'display': 'block'});
                    var packType = $(this).attr('packType');
                    $('.detail'+packType).css({'display': 'block'});
                });
                $('#bookBtn').click(function(){
                    $('.detail').css({'display': 'none'});
                    $('.packagesShow').css({'display': 'block'});
                })
            } (jQuery));
        </script>
    </block>
</block>